<template>
  <div>
    <div class="leavedashboard-container">
      <span class="little"></span>
      <div class="dashboard-text">企业留言管理</div>
    </div>
    <!-- 卡片区域 -->
    <el-card class="decobox-card">
      <div class="tittlebox">
        <!-- 总数 -->
        <div class="yellowbox">
          <div class="leftbox">
            <img src="../../img/title1.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="sum">{{ sum }}</div>
            <div>总数</div>
          </div>
        </div>
        <span class="dashedbox"></span>

        <div class="bluebox">
          <div class="leftbox">
            <img src="../../img/title4.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="certified">{{ service }}</div>
            <div style="width: 70px">融资需求</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <div class="bluebox">
          <div class="leftbox">
            <img src="../../img/title2.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="certified">{{ opinion }}</div>
            <div style="width: 70px">招聘用工</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <div class="bluebox">
          <div class="leftbox">
            <img src="../../images/renzhengzhong.jng.png" alt="" />
          </div>
          <div class="rightbox">
            <div class="certified">{{ complait }}</div>
            <div style="width: 70px">行政协调</div>
          </div>
        </div>
        <span class="dashedbox"></span>

        <div class="redbox">
          <div class="leftbox">
            <img src="../../img/title3.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="process">{{ other }}</div>
            <div style="width: 70px">其它事项</div>
          </div>
        </div>
      </div>
      <el-form :model="form" class="leaveinquire">
        <el-row>
          <el-col :span="6">
            <el-form-item class="e-inputone">
              <el-input v-model="form.input" prefix-icon="el-icon-search" placeholder="请输入用户名">
                <i slot="suffix" class="el-icon-circle-close" @click="form.input = ''"></i>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="status">
              <div style="display: flex;">
                <div>
                  <el-select v-model="form.dropdown" style="margin-right: 10px">
                    <el-option label="待回复" value='0'></el-option>
                    <el-option label="已回复" value='1'></el-option>
                    <el-option label="全部" value='0,1'></el-option>
                  </el-select>
                </div>
                <div>
                  <el-select v-model="form.dropdowntwo" style="margin-right: 10px">
                    <el-option label="未发布" value='0'></el-option>
                    <el-option label="已发布" value='1'></el-option>
                    <el-option label="全部" value='0,1'></el-option>
                  </el-select>
                </div>
                <div>
                  <el-select v-model="form.dropdownthree">
                    <el-option label="融资需求" value='0'></el-option>
                    <el-option label="招聘用工" value='1'></el-option>
                    <el-option label="行政协调" value='2'></el-option>
                    <el-option label="其它事项" value='3'></el-option>
                    <el-option label="全部" value='0,1,2,3'></el-option>
                  </el-select>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="3">

            <el-form-item class="leavereserve">
              <!-- <el-button  @click="submitForm" class="leavesubmitForm" style="margin-left: 20px;background: #216cff;color: #fff;margin-bottom: 2px;">查询</el-button> -->
              <button @click="submitForm" class="leavesubmitForm"
                style="margin-left: 20px;background: #216cff;color: #fff;">查询</button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="boxcard-bottom">
      <!-- 表格-->
      <div class="table-container" style="margin-top: 0px;">
        <el-table :data="tableData" style="width: 100%;" :border="false" :show-overflow-tooltip="false" stripe
          class="bigtable">
          <el-table-column type="index" label="序号" width="70px" :index="indexMethod"></el-table-column>
          <el-table-column label="状态" prop="status">
            <template slot-scope="{ row }">
              <span :class="getStatusClass(row.messageStatus)">
                {{ getStatusText(row.messageStatus) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名/企业信息" width="300px">
            <template slot-scope="{ row }">
              {{ row.qyName }}
            </template>
          </el-table-column>
          <el-table-column label="用户名">
            <template slot-scope="{ row }">
              {{ row.username }}
            </template>
          </el-table-column>
          <el-table-column label="留言时间">
            <template slot-scope="{ row }">
              {{ row.gmtCreate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="留言类型">
            <template slot-scope="{ row }">
              <span v-if="row.messageType == '0'">
                融资需求
              </span>
              <span v-if="row.messageType == '1'">
                招聘用工
              </span>
              <span v-if="row.messageType == '2'">
                行政协调
              </span>
              <span v-if="row.messageType == '3'">
                其它事项
              </span>
            </template>
          </el-table-column>
          <el-table-column label="回复信息">
            <template slot-scope="{ row }">
              <i class="el-icon-share" style="margin-right: 4px; color: #216cff"></i>
              <span style="color: #216cff;cursor:pointer;" @click="lookmessage(row.id)">回复详情</span>
            </template>
          </el-table-column>
          <el-table-column label="是否发布" width="100px">
            <template slot-scope="{ row }">
              <el-switch @change="handleChange(row.id, row.publishStatus)" v-model="row.publishStatus"
                :disabled="showExampleBtn.disabled" active-color="#13ce66" inactive-color="#E7E9EE" :active-value="1"
                :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <button size="mini" type="primary" :disabled="showExampleBtn.disabled" @click="handleEdit(scope.row.id)"
                class="button-plain" style="
                      width: 52px;
                      height: 24px;
                      font-size: 16px;
                      font-weight: 500;
                      margin-right: 10px;
                      margin-left: 10px;
                      background-color: transparent;
                    ">
                回复
              </button>
              <button size="mini" type="danger" class="button-delete" @click="handsay(scope.row.id)"
                :disabled="showExampleBtn.disabled" style="
                      width: 52px;
                      height: 24px;
                      font-size: 16px;
                      font-weight: 500;
                      margin-right: 10px;
                      background-color: transparent;
                    ">
                删除
              </button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination background align="center" class="footerpage" layout="prev, pager, next"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="currentPage"
        :page-size="pageSize">
      </el-pagination>
      <!-- 留言面板 -->
      <showmessage ref="mymessage" />
      <!-- 留言面板无输入框 -->
      <lookshowmessage ref="mylookmessage" />
    </el-card>
  </div>
</template>

<script>

import { mapGetters } from "vuex";
import showmessage from "@/views/demonstration/components/message.vue";
import lookshowmessage from "@/views/demonstration/components/lookmessage.vue";
import {
  getapprovallist,
  countConsult,
  countOpinion,
  countPublishMessage,
  countComplaint,
  otherthings
} from "@/api/demonstrations";
import { upMessage, selectLike, likedeleteById } from "@/api/nested";
export default {
  components: {
    showmessage,
    lookshowmessage,
  },
  name: "Dashboard",
  data() {
    return {
      isyes: true,
      form: {
        input: "",
        status: "已办结",
        dropdown: "0,1",
        dropdowntwo: "0,1",
        dropdownthree: '0,1,2,3'
      },
      tableData: [],
      newList: [],
      currentPage: 1, // 当前页码
      // total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
      total: 0,
      newpage: 1,
      newpagesize: 5,
      service: "",
      opinion: "",
      complait: "",
      other: "",
      sum: "",
      countComplaintnumber: '',
      adminId: this.$store.state.user.userInfo.id,
      username: this.$store.state.user.userInfo.username
    };
  },
  created() {
    this.getapprovallist();
    this.countConsult();
    this.countOpinion();
    this.countComplaint()
    this.otherthings()
    this.countPublishMessage();
    this.countComplaintsum()

  },
  methods: {
    async getapprovallist() {
      const res = await getapprovallist({
        page: this.currentPage,
        size: this.pageSize,
      });
      this.total = res.data.data.total;
      this.tableData = res.data.data.records;
      // console.log(records);
    },
    submitForm() {
      selectLike({
        username: this.form.input,
        messageStatus: this.form.dropdown,
        publishStatus: this.form.dropdowntwo,
        messageType: this.form.dropdownthree,
        page: this.newpage,
        size: this.newpagesize,
      }).then((res) => {
        if (res.data.state === 20000) {
          // 使用一个新数组存储从后台返回的数据
          const newData = res.data.data.records;
          // 在 nextTick 回调函数中获取 DOM 元素
          // console.log(newData);
          this.tableData = newData;
        }
      });
    },
    resetForm() {
      // 重置表单的逻辑
      this.getapprovallist();
    },
    handleEdit(id) {
      // 编辑操作
      this.$refs.mymessage.demonstrate(id);
    },
    handsay(id) {
      this.$confirm("确定删除此项留言?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        return likedeleteById({ id: id }).then((res) => {
          if (res.data.state === 20000) {
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败请稍后重试");
          }
        }).then(() => {
          if (this.tableData.length == 1 && this.currentPage != 1) {
            this.currentPage--
          }
          this.getapprovallist();
          this.countConsult();
          this.countOpinion();
          this.countComplaint()
          this.otherthings()
          this.countPublishMessage();
          this.countComplaintsum()
        })
      });
    },

    // 动态class的方法,根据状态的不同显示不同的颜色
    // 动态class的方法,根据状态的不同显示不同的颜色
    getStatusClass(status) {
      switch (status) {
        case 0:
          return "blue-text";
        case 1:
          return "green-text";

        default:
          return "";
      }
    },
    getStatusText(status) {
      switch (status) {
        case 0:
          return "待回复";
        case 1:
          return "已回复";
        default:
          return "";
      }
    },
    // 融资
    countConsult() {
      countConsult().then((res) => {
        this.service = res.data.data;
      });
    },
    // 招聘用工
    countOpinion() {
      countOpinion().then((res) => {
        this.opinion = res.data.data;
      });
    },
    // 行政协调
    countComplaint() {
      countComplaint().then(res => {
        console.log(res);
        this.complait = res.data.data
      })
    },
    // 其它事项
    otherthings() {
      otherthings().then(res => {
        this.other = res.data.data
      })
    },
    // 总数
    countPublishMessage() {
      countPublishMessage().then((res) => {
        this.sum = res.data.data;
      });
    },
    countComplaintsum() {
      countComplaint().then(res => {
        this.countComplaintnumber = res.data.data
      })
    },
    // 打开留言查看
    lookmessage(id) {
      this.$refs.mylookmessage.lookdemonstrate(id);
    },
    // 管理员发布留言
    handleChange(id, publishStatus) {
      upMessage({ id: id, publishStatus: publishStatus, adminId: this.adminId, username: this.username }).then(res => {
        if (res.data.state === 20000) {
          this.$message.success('操作成功')
        } else {
          this.$message.error('操作失败请稍后重试')
        }
      })
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getapprovallist();
    },
  },
  computed: {
    ...mapGetters(["name"]),
    // 根据返回角色id控制按钮禁用
    showExampleBtn() {
      const userRoles = this.$store.state.user.userInfo.id;
      if (userRoles !== 1) {
        return {
          disabled: true,
        };
      } else {
        return {
          disabled: false,
        };
      }
    },
    indexMethod: function () {
      return (this.currentPage - 1) * (this.pageSize) + 1
    }
  },
};
</script>

<style lang="scss">
.el-select-dropdown__item.selected {
  display: none;
}

.el-card__body {
  box-shadow: none;
}

.el-card {
  box-shadow: none;
  border: none;
}

.leavedashboard-container {
  display: flex;
  padding: 10px 26px 8px 26px;

  .little {
    display: inline-block;
    width: 5px;
    height: 20px;
    background: #3064fc;
    margin-right: 6px;
  }

  .dashboard-text {
    font-size: 16px;
  }
}

.decobox-card {
  width: 99%;
  height: 210px;
  margin-left: 8px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;

  .tittlebox {
    display: flex;
    justify-content: space-between;

    .yellowbox,
    .bluebox,
    .redbox,
    .greenbox {
      display: flex;
      justify-content: center;
      align-items: center;

      .rightbox {
        :nth-child(2) {
          width: 48px;
          height: 16px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #2e2e2e;
          // line-height: 10px;
        }
      }

      .sum {
        font-weight: bold;
        color: #fabc00;
      }

      .certified {
        font-weight: bold;
        color: #1e6ceb;
      }

      .process {
        font-weight: bold;
        color: #f46e3e;
      }

      .noprocess {
        font-weight: bold;
        color: #31a952;
      }
    }
  }

  // 表单
  .leaveinquire {
    margin-top: 30px;
    margin-left: 2px;
  }

  // 认证状态
  .status {
    // margin-left: 50px;
  }

  .e-inputone {
    margin-right: 20px;
  }

  // 查询
  .leavereserve {
    // margin-left: 30px;

    .leavesubmitForm {
      width: 105px;
      border: 0;
      height: 39px;
      border-radius: 5px;
      // margin-right: 10px;
      background: #4777e8;
    }

    .resetForm {
      color: #fff;
      font-size: 15px;
      width: 105px;
      height: 40px;
      background: #7986a6;
    }
  }
}

.dashedbox {
  display: inline-block;
  margin-top: 34px;
  height: 20px;
  width: 1px;
  border: 1px solid #eaedf2;
  margin-right: 30px;
  margin-left: 2px;
  // width: 10px;
}

// 下方卡片区域
.boxcard-bottom {
  margin-top: 10px;
  width: 99%;
  max-height: 1200px;
  margin-left: 8px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
}
</style>
<!-- 表格样式css -->
<style>
.table-container {
  /* padding: 60px; */
}

.table-container .el-table__header th {
  color: #216cff;
  font-size: 16px;
  background-color: #f3f6fb;
  /* border: 1px solid #e5e5e3; */
  text-align: center;
}

.table-container .el-table__body td {
  /* border: 1px solid #ddd; */
  text-align: center;
  font-weight: bold;
}

/* 三种状态的不同显示颜色 */
.blue-text {
  color: #2675c0;
}

.green-text {
  color: #31a952;
}

.red-text {
  color: #f46e3e;
}

.footerpage {
  margin-top: 40px;
}

.button-plain {
  background-color: transparent;
  border: none;
}

.button-delete {
  background-color: transparent;
  border: none;
}

/* 鼠标移过时的样式 */
button:disabled:hover {
  cursor: not-allowed;
  background-color: transparent;
}

/* 正常情况下的样式 */
button:not(:disabled) {
  cursor: pointer;
  background-color: transparent;
}
</style>

